<template>
	<view class="discoverCon" :class="{'showRightSidebar': 0}">
		<!-- 主内容 -->

		<view class="main-content">
			<!-- 对话内容部分 -->
			<view class="content">
				<scroll-view :scroll-y="true" id="scrollView" style="height:100%" :scroll-top="scrollTppp">
					<view class="messageCon" ref="chatContainer" id="messagesContainer" @scroll="onScroll">
						<!-- 首条系统欢迎语 -->
						<view class="chat-bot">
							<view class="welcomeSpeech">
								<view class="welcomeSpeechLf">
									<!-- <img src="@/assets/content/dialogue2x.png" alt="" class="head"> -->
									<view class="welcomeSpeechCn">
										<span>Hi，我是iMAi，您的专属技术经理人~如果您有成果合作或成果转化的需求，我可以为您提供以下服务：</span>
										<span>匹配合作方：您可以通过对话或上传资料，告诉我成果相关的信息，例如：成果名称、简介、应用领域和场景、解决问题、完成人、完成单位、完成阶段、期望合作方式等，我会为您匹配合适的合作方，信息提供越详细匹配越精准哦~</span>
									</view>
								</view>
							</view>
						</view>
						<view v-for="(message, index) in conversation" :key="index" class="chat-message">
							<!-- 机器人消息在左 -->
							<view class="chat-bot" v-if="message.type === 'bot'">
								<view class="bot-message-container">

									<view class="bot-message">
										<!-- <p>{{ message.text }}</p> -->
										<template v-if="message.text">
											<!-- <vue-markdown :source="message.text" class="bot-message-markdown"></vue-markdown> -->
											<zero-markdown-view class="zero-markdown-view-markdown"
												:markdown="message.text"></zero-markdown-view>
										</template>
										<view class="bot-button">
											<view class="copy" v-clipboard:copy="message.text"
												v-clipboard:success="copyToClipboard">
												<img src="@/assets/content/icon_copy@2x.png" alt="">
												<!-- <span>复制</span> -->
											</view>
											<view class="reset" @click="regenerateMessage(message)">
												<img src="@/assets/content/icon_reset@2x.png" alt="">
												<!-- <span>重新生成</span> -->
											</view>
										</view>
									</view>
								</view>

							</view>
							<!-- 用户消息在右 -->
							<view class="chat-user" v-if="message.type === 'user'">
								<view class="user-message-container">
									<view class="user-message">
										<p>{{ message.text }}</p>
									</view>
								</view>
							</view>
						</view>
						<!-- Loading -->
						<view class="chat-message">
							<view class="chat-bot loading" v-show="isLoading">
								<view class="bot-message-container">
									<view class="bot-message">
										<Loading :loading="isLoading" message="正在查找" />
									</view>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="sxwise_right" @click="scrollToBottomClick" v-if="showArrow">
					<el-avatar size="small" :src="srcArrow"></el-avatar>
				</view>

			</view>
			<!-- 底部输入栏 -->

			<view class="input-bar aaaaa" :style="{ 'bottom': keyboardHeight + 'px' }" v-if="keywordShow">
				<view class="search-area">
					<!--    <img src="@/assets/icon_arrow.svg" alt="" class="icon_arrow" v-if="showArrow">-->
					<img src="@/assets/content/loadIcon.png" class="load-icon" alt="Chatbot Icon"
						style="margin-right: 0.5vw;cursor: pointer;" @click="addDialogue" />
					<view class="search-input">
						<input v-model="searchQuery" @keydown.enter="submitSearch" type="text" @focus="handleFocus"
							@blur="handleBlur" :placeholder="placeholderText" />
						<view @click="submitSearch" class="send-button" v-if="!isStreaming">
							<!-- <span>发送</span> -->
							<img src="@/assets/content/send@2x.png" alt="Send Icon" class="send-icon" />
						</view>
						<view v-else class="stop" @click="stopStreaming" style="margin-left:5px"><img
								src="@/assets/icon_stop.svg" alt="Send Icon" class="stop-icon"
								style="cursor: pointer;vertical-align: middle;" /></view>
					</view>
				</view>
			</view>
			<view class="input-bar" v-if="!keywordShow">
				<view class="search-area">
					<!--    <img src="@/assets/icon_arrow.svg" alt="" class="icon_arrow" v-if="showArrow">-->
					<img src="@/assets/content/keyboardIcon.png" class="load-icon1" alt="Chatbot Icon"
						style="margin-right: 0.5vw;cursor: pointer;" @click="addDialogue" />
					<view class="search-input">
						<!-- <input v-model="searchQuery" @keydown.enter="submitSearch" type="text" @focus="handleFocus"
		@blur="handleBlur"
		:placeholder="placeholderText"/> -->
						<view class="anzhu">
							<Recorder @tapeText="tapeText"></Recorder>
						</view>

						<view @click="submitSearch" class="send-button" v-if="!isStreaming">
							<!-- <span>发送</span> -->
							<img src="@/assets/content/sendIcon.png" alt="Send Icon" class="send-icon" />
						</view>
						<view v-else class="stop" @click="stopStreaming" style="margin-left:5px"><img
								src="@/assets/icon_stop.svg" alt="Send Icon" class="stop-icon"
								style="cursor: pointer;vertical-align: middle;" /></view>
					</view>
				</view>
			</view>
		</view>


		<ErrorModal ref="errorModal" :message="errorMessage" :duration="3000" />
	</view>
</template>

<script>
	//import { getAboutUs } from "@/api/common";
	import {
		generateWeightedRandomNumber,
		randomSplitString
	} from "@/utils/random";
	import {
		checkAndSetUserAndConversationId
	} from "@/utils/user";

	//import dayjs from "dayjs"
	// 引入swiper所需的组件
	//import VueMarkdown from 'vue-markdown'
	//import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
	import ErrorModal from '@/components/ErrorModal.vue' //转化通
	// import ContentEnterMixin from '@/mixins/ContentEnterMixin';
	import Loading from '@/components/Loading.vue';
	import Recorder from '@/components/lpx-recorder/Recorder.vue' //录音
	//import "swiper/css/swiper.css";
	export default {
		// mixins: [ContentEnterMixin],
		// 注册组件
		components: {
			//Swiper,
			//SwiperSlide,
			ErrorModal,
			Loading,
			Recorder
			//VueMarkdown,
		},
		//directives: {
		//  swiper: directive,
		//},
		computed: {},
		props: {
			keyboardHeight: '' // 定义接收一个名为message的字符串类型的prop
		},
		data() {
			return {
				scrollTppp: 0,
				keywordShow: true,
				// keyboardHeight:0,
				showArrow: false,
				citeSourceShow: false,
				isLoading: false,
				conversationId: '',
				hasSetConversationId: false,
				isStreaming: false, // 控制流式数据的标志
				errorMessage: "", // 自定义的异常信息
				searchQuery: '', // 用于绑定搜索输入框
				dialogFormVisible: false, //帮我对接
				webSiteLength: null,
				patentLength: null,
				achievementLength: null,
				classDialog: 'classDialog',
				labelPosition: 'top',
				showClose: false,
				rules: {
					name: [{
						required: true,
						message: '请输入公司名称',
						trigger: 'blur'
					}, ],
					phone: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}],
					area: [{
						type: 'date',
						required: true,
						message: '请选择区域',
						trigger: 'change'
					}],
					industry: [{
						type: 'date',
						required: true,
						message: '请选择行业类型',
						trigger: 'change'
					}]
				},
				form: {
					name: '',
					area: '',
					industry: '',
					phone: '',
					delivery: false,
					resource: '',
					desc: ''
				},
				streamBuffer: '',
				formLabelWidth: '120px',
				title: "技术经理人的职责有哪些",
				tabs: [{
						id: 0,
						name: "W-网页"
					},
					{
						id: 1,
						name: "P-专利库"
					},
					{
						id: 2,
						name: "R-成果库"
					}
				],
				activeTab: 0, // 默认选中第一个 Tab
				conversation: [],
				currentTab: "W1",
				listData: [],
				placeholderText: '提出技术需求，快速匹配成果',
				isFocused: false,
				isUserScrolling: false, // 标志位，记录用户是否在手动滚动
				references: {
					W1: [],
					P2: [],
					R3: []
				},
				debounceTimer: null,
				userInfo: {
					phoneNumber: 'abc-456'
				}
			};
		},
		onLoad() {

		},
		mounted() {
			let that = this
			wx.getStorage({
				key: 'userinfo',
				success: function(res) {
					console.log(res.data); // 输出：value
					if (res.data) {
						that.userInfo = res.data
					} else {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			});
		},
		methods: {
			tapeText(e) {
				this.searchQuery = e
				this.keywordShow = true
			},
			// 新建对话
			addDialogue() {
				// this.$emit('reload'); // 发出自定义事件
				this.keywordShow = !this.keywordShow;
				this.searchQuery = ''
			},
			// 重新生成消息
			regenerateMessage(message) {
				if (this.isLoading) {
					return;
				}
				this.isLoading = true;
				if (this.lastUserMessage) {
					this.getMessage(this.lastUserMessage);
				}
			},
			onScroll(ev) {
				const chatContainer = this.$refs.chatContainer;
				this.showArrow = (chatContainer.scrollHeight - (chatContainer.scrollTop + chatContainer.clientHeight)) >
				10;

				// 如果滚动条未到最底部，认为用户在手动滚动
				if (Math.abs(chatContainer.scrollTop + chatContainer.clientHeight - chatContainer.scrollHeight) > 1) {
					this.isUserScrolling = true;
				} else {
					this.isUserScrolling = false; // 用户滚动到底部时，恢复自动滚动
				}

			},

			// 自动滚动到底部
			scrollToBottom() {
				this.$nextTick(() => {
					if (this.debounceTimer) {
						clearTimeout(this.debounceTimer); // 清除上次的定时器
					}
					// this.debounceTimer = setTimeout(() => {
					this.scrollTppp += 100
					// console.log(this.scrollTppp)
					//     wx.createSelectorQuery().select('#scrollView').boundingClientRect((rect) => {
					//       const contentHeight = rect.height;  // 内容高度
					//       const visibleHeight = rect.scrollHeight;  // 可视区域高度
					//       const maxScrollTop = contentHeight - visibleHeight;
					//       console.log("最大 scrollTop: ", maxScrollTop);
					// this.scrollTppp=maxScrollTop
					// }).exec();
					// }, 200);  // 防抖时间间隔为200ms
					// console.log(this.scrollTppp)
					// this.scrollTppp+=1
					//       const messagesContainer = wx.createSelectorQuery().select('#messagesContainer');
					// console.log(messagesContainer)
					//           messagesContainer.boundingClientRect((rect) => {
					//             // 获取容器的scrollHeight
					// 	  console.log(rect.height)
					//             messagesContainer.scrollTop = rect.height;
					// 	  })
					// const chatContainer = this.$refs.chatContainer;
					// if (chatContainer) {
					//   const scrollHeight = chatContainer.scrollHeight;
					//   if (this.isUserScrolling) {
					//     console.log(327)
					//     return;
					//   }
					//   console.log(322)
					//   chatContainer.scrollTop = scrollHeight; // 滚动到底部
					// }
				});
			},

			// 复制到剪贴板
			copyToClipboard(text) {
				this.$message({
					message: '复制成功',
					type: 'success'
				});
			},
			toUnfold() {
				this.citeSourceShow = !this.citeSourceShow
			},
			handleFocus() {
				// 当input获得焦点时，清空placeholder
				this.placeholderText = '';
				this.isFocused = true;
			},
			handleBlur() {
				// 当input失去焦点时，如果input没有内容，则恢复placeholder
				if (!this.inputValue) {
					this.placeholderText = '提出技术需求，快速匹配成果';
				}
				this.isFocused = false;
			},
			// 停止流操作
			stopStreaming() {
				this.isStreaming = false; // 设置标志为 false，停止处理流
				this.finishBotMessage(); // 标记当前 bot 消息为已完成
				this.streamBuffer = ''; // 清空流缓存，确保不会继续拼接
				this.isLoading = false; // 停止加载状态
				this.isTyping = false; // 重置打字状态
			},
			// web 跳出
			toLink(item) {
				window.open(item.url, '_blank'); // 在新标签页中打开链接
			},
			changeTab(tab, webSiteLength, patentLength, achievementLength) {

				// 以防万一，使用 text 而非 id 判断
				const tabName = (tab.name || "").trim()
				if (tabName.indexOf("网页") > -1) {
					if (!webSiteLength) return;
				} else if (tabName.indexOf("成果库") > -1) {
					if (!achievementLength) return;
					return;
				} else if (tabName.indexOf("专利库") > -1) {
					if (!patentLength) return;
				}

				// 没数据的时候，禁止跳转
				this.activeTab = tab.id;
			},
			// 提交用户查询
			submitSearch() {
				if (this.searchQuery.trim()) {
					this.lastUserMessage = this.searchQuery; // 保存用户消息
					this.conversation.push({
						type: 'user',
						text: this.searchQuery
					});
					this.scrollToBottom(); // 自动滚动到底部
					this.getMessage(this.searchQuery); // 获取机器人回复
					this.searchQuery = ''; // 清空输入框
					this.isLoading = true;
				}
			},
			// 初始化 bot 消息，将其添加到 conversation 中
			startBotMessage() {
				this.currentBotText = ''; // 重置当前 bot 文本
				this.conversation.push({
					type: 'bot',
					text: this.currentBotText,
					completed: false
				});
			},
			// 获取流式消息
			async getMessage(searchQuery) {
				try {
					this.isUserScrolling = false
					//const ids = checkAndSetUserAndConversationId();
					this.isStreaming = true; // 每次请求时重置流控制
					const token = 'app-B5lsfDhp9OevdYsiwxYojlop';
					const url = 'https://platformai.imaibj.cn/v1/chat-messages'
					const header = {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
					const data = JSON.stringify({
						response_mode: 'streaming',
						query: searchQuery,
						//user: ids.userId,
						inputs: {
							"question_type": "4",
							"output_type": '1'
						},
						user: this.userInfo.user_id,
						conversation_id: this.conversationId
					})
					// const token = 'app-B5lsfDhp9OevdYsiwxYojlop';
					//        const response = await fetch('http://www.imaibj.cn/v1/chat-messages', {
					//          method: 'POST',
					//          headers: {
					//            'Content-Type': 'application/json',
					//            'Authorization': `Bearer ${token}`
					//          },
					//          body: JSON.stringify({
					//            response_mode: 'streaming',
					//            query: searchQuery,
					//            inputs: { "question_type": "4", "output_type": '1' },
					//            user: 'abc-456',
					//            conversation_id: this.conversationId
					//          }),
					//        });
					const isH5 = 0;
					if (isH5) {
						const response = await fetch(url, {
							method: 'POST',
							headers: header,
							body: data,
						});
						if (response.ok) {
							const reader = response.body.getReader();
							const decoder = new TextDecoder('utf-8');
							let done = false;

							while (!done) {
								if (!this.isStreaming) break; // 如果停止流，则退出循环
								const {
									value,
									done: readerDone
								} = await reader.read();
								done = readerDone;

								if (value) {
									const chunk = decoder.decode(value, {
										stream: true
									});
									await this.processStreamChunk(chunk); // 处理流式数据块
								}
							}
						} else {
							console.error('Response error:', response.status);
						}

					} else {
						console.log('start uni.request')
						const requestTask = uni.request({
							url: url,
							timeout: 15000,
							method: 'POST',
							responseType: 'arraybuffer',
							enableChunked: true, //配置这里
							header: header,
							data: data,
							success: response => {
								//console.log(response)
							},
							fail: error => {}
						})
						//@ts-ignore
						requestTask.onHeadersReceived(function(res) {
							//console.log(res.header);
						});
						//@ts-ignore
						requestTask.onChunkReceived(async (res) => {
							//let decoder = new TextDecoder('utf-8')
							//let text = decoder.decode(new Uint8Array(res.data),{ stream: true })

							let udata = new Uint8Array(res.data)
							let text = '';
							for (let i = 0; i < udata.length; i++) {
								text += String.fromCharCode(udata[i]);
							}
							//console.log('receive chunk data: ',text)
							await this.processStreamChunk(text) // 处理流式数据块
						})
					}
				} catch (error) {
					console.error('Fetch error:', error);
				} finally {
					//this.isStreaming = false;  // 流式处理结束
					this.isLoading = false;
				}
			},

			// 处理流式数据块
			async processStreamChunk(chunk) {
				if (!this.isStreaming) return; // 检查是否停止流处理
				this.streamBuffer += chunk;

				let endIndex;
				while ((endIndex = this.streamBuffer.indexOf('\n\n')) !== -1) {
					const block = this.streamBuffer.slice(0, endIndex);
					this.streamBuffer = this.streamBuffer.slice(endIndex + 2); // 移除已处理的部分
					//console.log('processStreamChunk:',block)
					try {
						const jsonStr = block.replace('data:', '').trim();
						if (jsonStr.startsWith('{') && jsonStr.endsWith('}')) {
							const jsonData = JSON.parse(jsonStr);

							// 只在第一次获取到 conversation_id 时赋值
							if (!this.hasSetConversationId && jsonData.conversation_id) {
								this.conversationId = jsonData.conversation_id; // 更新 conversationId
								this.hasSetConversationId = true; // 设置标志为 true
							}

							// 检查 node_finished 事件，并确认 title 为 "refjson_output"
							if (jsonData.event === 'node_finished' && jsonData.data.title === 'refjson_output') {

								// 1. 清理字符串
								let jsonString = jsonData.data.outputs.output.trim(); // 去掉首尾空白字符
								// 使用正则表达式提取 JSON 对象
								let jsonArray = jsonString.match(/{.*?}/g);

								// 将提取到的字符串数组转换为 JSON 对象数组
								let resultArray1 = jsonArray.map(item => JSON.parse(item)).filter((item, index,
									array) => {
										return item.ref_type == "web";
									});
								let resultArray2 = jsonArray.map(item => JSON.parse(item)).filter((item, index,
									array) => {
										return item.ref_type == "patent_lib";
									});
								let resultArray3 = jsonArray.map(item => JSON.parse(item)).filter((item, index,
									array) => {
										return item.ref_type == "achievement_lib";
									});
								console.log(351, resultArray1)
								console.log(351, resultArray2)
								console.log(351, resultArray3)
								// 如果需要将对象转换为数组，可以根据需要选择数组的格式
								this.webSiteLength = null,
									this.references.W1 = []

								this.patentLength = null,
									this.references.P2 = []

								this.achievementLength = null,
									this.references.R3 = []

								this.webSiteLength = resultArray1.length,
									this.patentLength = resultArray2.length,
									this.achievementLength = resultArray3.length,
									this.references.W1 = resultArray1
								this.references.P2 = resultArray2
								this.references.R3 = resultArray3

								// 根据条件设置activeTab
								if (this.webSiteLength > 0) {
									this.activeTab = 0;
								} else if (patentLength > 0) {
									this.activeTab = 1;
								} else if (this.achievementLength > 0) {
									this.activeTab = 2;
								}
							}
							// 针对每个 `message` 事件立刻展示消息，而不是等待全部消息
							if (jsonData.event === 'message') {
								//console.log('message:',jsonData.answer)
								if (!this.isTyping) {
									console.log('change typing mode')
									this.startBotMessage();
									this.isTyping = true;
								}
								this.isLoading = false;
								// 每次收到新的 message 就立刻触发打字效果逐字显示
								await this.typewriterEffect(jsonData.answer);
							} else if (jsonData.event === 'message_end') {
								this.finishBotMessage();
								this.isTyping = false;
								this.isStreaming = false;
								console.log('Message stream ended');
							} else if (jsonData.event === 'workflow_finished') {
								console.log('Workflow finished:', jsonData);
							} else if (jsonData.event === 'error') {
								console.log('异常了', jsonData)
								this.isLoading = false;
								this.isStreaming = false;
								this.errorMessage = ''
								this.errorMessage = '网络异常'
								this.$refs.errorModal.show(); // 调用子组件的show方法显示弹框
							} else {
								//console.warn('Unhandled event type:', jsonData.event);
							}
						} else {
							console.warn('Received non-JSON data:', block);
						}
					} catch (error) {
						console.error('Failed to process chunk:', block, error);
					}
				}
			},

			// 实现打字机效果
			async typewriterEffect(text) {
				// console.log(text.length)
				if (text.length < 10) {
					if (!this.isStreaming) return; // 检查是否停止打字效果
					const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
					if (botMessage) {
						let messageText = botMessage.text || '';
						messageText += text;
						botMessage.text = messageText;
						this.scrollToBottom();

						if (generateWeightedRandomNumber() > 0) {
							await this.delay(generateWeightedRandomNumber());
						}
					}
				} else {
					const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
					// console.log('typeEffect1:',text)
					if (botMessage) {
						let fullText = text
						let index = 0;

						const interval = setInterval(() => {
							if (index <= fullText.length) {
								botMessage.text = fullText.slice(0, index);
								index++;
								this.scrollToBottom();
							} else {
								clearInterval(interval); // 停止计时器
							}
						}, 50);
					}
				}
			},

			// 结束 bot 消息
			finishBotMessage() {
				const botMessage = this.conversation.find(msg => msg.type === 'bot' && !msg.completed);
				if (botMessage) {
					botMessage.completed = true;
				}
			},

			// 延迟函数
			delay(ms) {
				return new Promise(resolve => setTimeout(resolve, ms));
			},


		},
	};
</script>

<style lang="scss" scoped>
	//@import "@/styles/chat-message.scss";
	.discoverCon {
		height: 100%;
	}

	.main-content {
		position: relative;
		height: 100%;
	}


	.header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.button {
		margin-top: 10px;
		padding: 10px 20px;
		background-color: #0052cc;
		color: white;
		border: none;
		cursor: pointer;
	}

	.user-message {
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		color: #ffffff;
		border-radius: 10rpx;
		background: linear-gradient(330deg, #2C57F3 0%, #027BFF 100%);
		margin-bottom: 20px;
	}

	.bot-message {
		padding: 15rpx;
		// padding-bottom: 30rpx;
		background-color: #ffffff;
		margin-bottom: 20px;
	}

	.bot-message-container,
	.user-message-container {
		display: flex;
		align-items: flex-start;
	}

	.bot-message-container {
		justify-content: flex-start;
		/* 机器人消息居左 */
	}

	.user-message-container {
		justify-content: flex-end;
		/* 用户消息居右 */
	}

	.bot-icon,
	.user-icon {
		// font-size: 24px;
		margin: 0 0.5vw;
	}

	.user-icon {
		margin-right: 0;

		img {
			width: 8vw;
			height: 5vh;
		}
	}

	.bot-icon {
		margin-left: 0;

		img {
			width: 8vw;
			height: 5vh;
		}
	}

	.citeSource {
		display: flex;
		flex-direction: column;
		align-items: end;
	}

	.reference-bar {
		// margin-left: 40px;
		width: 414px;
		height: calc(100vh - 162px);
		background-color: #ffffff;
		overflow: hidden;
		margin-right: 20px;
		border-radius: 20px;

		ul {
			padding: 0;
			margin-left: 28px;
			margin-right: 28px;
			margin-top: 20px;
			max-height: calc(100vh - 300px);
			overflow: auto;
		}

		h3 {
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			font-size: 0.8vw;
			display: block;
			color: #000000;
			line-height: 22px;
			text-align: left;
			font-style: normal;
			padding-left: 20px;
			padding-top: 20px;
			margin-bottom: 20px;
		}

		.tabs {
			width: 358px;
			height: 52px;
			background: #F2F5FA;
			border-radius: 12px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 8px;
			padding-right: 8px;

			view {
				width: 114px;
				height: 36px;
				background: #F2F5FA;
				border-radius: 8px;
				text-align: center;
				line-height: 36px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 0.75vw;
				color: #677190;
				font-style: normal;
				cursor: pointer;
			}

			.active {
				background: #FFFFFF;
				box-shadow: 0px 2px 8px 0px rgba(220, 223, 234, 0.8);
				border-radius: 8px;
				color: #000000;
				font-weight: bold;
			}
		}
	}

	.tabs {
		display: flex;
		margin-bottom: 10px;
	}

	.tabs button {
		flex: 1;
		padding: 10px;
		background-color: #e0e0e0;
		border: none;
		cursor: pointer;
	}

	.tabs button.active,
	.tabs button.active view {
		background-color: #0052cc;
		color: white;
	}

	.reference-item {
		margin-bottom: 16px;
		border-bottom: 1px solid #F2F5FA;
		cursor: pointer;
	}

	.content {
		overflow-y: auto;
		height: calc(100% - 60px);
	}

	.messageCon {
		// height: 100vh;
	}

	.reference-item-web {
		.reference-content {
			display: flex;
			width: 100%;
			// border-bottom: 1px solid #000;
			margin-bottom: 16px;
			flex-direction: column;

			.webTitle {
				font-family: PingFangSC, PingFang SC;
				font-weight: bold;
				font-size: 0.8vw;
				color: #000000;
				line-height: 27px;
				text-align: left;
				font-style: normal;
				margin-top: 8px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.webText {
				font-family: PingFangSC, PingFang SC;
				font-size: 0.75vw;
				color: #677190;
				line-height: 20px;
				text-align: left;
				font-style: normal;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.reference-contentTp {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.contentTitle {
					display: flex;
					align-items: center;
					width: 80%;
				}

				img {
					width: 20px;
					height: 20px;
					margin-right: 8px;
				}

				span {
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 0.75vw;
					color: #677190;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}

				.contentName {
					width: 60%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 0.75vw;
					color: #677190;
					line-height: 20px;
					text-align: left;
					font-style: normal;
				}

				.updateTime {
					margin-left: 12px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 0.75vw;
					color: #677190;
					line-height: 20px;
					text-align: left;
					font-style: normal;
					white-space: nowrap;
				}

				.label {
					// width: 25px;
					height: 17px;
					padding: 0 4px;
					background: #FF5E0D;
					border-radius: 8px 8px 8px 1px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 0.65vw;
					color: #FFFFFF;
					line-height: 17px;
					text-align: center;
					font-style: normal;
				}
			}
		}
	}

	.reference-item-patent {
		.reference-content {
			.reference-contentTp {
				.label {
					background: #2CC6FC;
				}
			}

			.buttJoint {
				width: 80px;
				height: 30px;
				border-radius: 8px;
				border: 1px solid #0053F3;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 0.75vw;
				color: #0053F3;
				line-height: 30px;
				text-align: center;
				font-style: normal;
				margin-top: 12px;
				cursor: pointer;
			}
		}

	}

	.reference-content {
		background-color: white;
		border-radius: 5px;
	}

	.input-bar {
		// display: flex;
		// align-items: center;
		// background-color: #F2F5FA;
		position: absolute;
		bottom: 0;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		background-color: #ffffff;
		box-shadow: 0px 4px 10px 0px #EDEDED;

		border-radius: 10rpx;
		// padding-top: 20px;

		&--arrow {
			&:after {
				position: absolute;
				left: 50%;
				top: 6px;
				content: " ";
				border: 5px solid transparent;
				border-top-color: rgba(0, 83, 243, 1);
				transform: translate3d(-50%, 0, 0);
			}
		}
	}

	.image-upload {
		margin-right: 10px;
	}

	.upload-icon {
		width: 40px;
		height: 40px;
	}

	.input-wrapper {
		display: flex;
		flex: 1;
		align-items: center;
		background-color: white;
		padding: 5px;
		border-radius: 20px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	}

	input {
		flex: 1;
		padding: 10px;
		border: none;
		outline: none;
	}

	.icon-inside-input {
		margin-right: 10px;
	}

	/* 搜索栏区域样式 */
	.search-area {
		display: flex;
		align-items: center;
		// margin-left: 50px;
		// margin-right: 92px;
		// width: calc(100% - 142px);
		width: 100%;
		padding: 10px;
		position: relative;

		img {
			//    width: 8vw;
			// height:6vh;
		}

		.icon_arrow {
			position: absolute;
			top: -16px;
			left: 50%;
			transform: translateX(-50%);
			cursor: pointer;
		}
	}

	.search-input {
		display: flex;
		align-items: center;
		width: calc(100% - 80rpx);
		// padding: 10px;
		height: 3vh;
		border-radius: 16px;
		background: #FFFFFF;
		border-radius: 20px;
		border: 0px solid #EAEAEA;
	}

	.load-icon {
		width: 30rpx;
		height: 38rpx;
	}

	.load-icon1 {
		width: 38rpx;
		height: 38rpx;
	}

	.stop-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.search-input input {
		flex-grow: 1;
		border: none;
		outline: none;
		font-size: 26rpx;
		padding: 5px;
	}

	.anzhu {
		flex-grow: 1;
		border: none;
		outline: none;
		font-size: 24rpx;
		padding: 5px;
		text-align: center;
	}

	.search-input input::placeholder {
		font-family: PingFangSC, PingFang SC;
		font-size: 24rpx;
		color: #505050;
		letter-spacing: 1px;
		text-align: left;
		font-style: normal;
	}

	.search-input .send-button {
		display: flex;
		align-items: center;
		// background-color: #1C48EC;
		color: #fff;
		padding: 0;
		height: 40px;
		border-radius: 10px;
		margin-left: 18px;
		cursor: pointer;
		font-size: 0.75vw;
		width: 6vw;
		height: 6vh;

		img {
			// width: 100%;
			width: 60rpx;
			height: 50rpx;
		}

		span {
			margin-right: 11px;
			font-weight: 500;
			font-size: 0.8vw;
			color: #FFFFFF;
			line-height: 25px;
			letter-spacing: 1px;
			text-align: left;
			font-style: normal;
			white-space: nowrap;
		}
	}

	.file-upload {
		margin-left: 10px;
		padding: 10px;
		cursor: pointer;
	}

	.chatbot-icon {
		width: 74px;
		height: 88px;
		margin-right: 15px;
	}

	.send-button {
		display: flex;
		align-items: center;
		// background-color: #0052cc;
		color: white;
		padding: 10px 15px;
		border-radius: 20px;
		cursor: pointer;
	}

	/* 动画效果 */
	.slide-left-enter-active,
	.slide-left-leave-active,
	.slide-right-enter-active,
	.slide-right-leave-active {
		transition: all 0.3s ease;
	}

	.slide-left-enter,
	.slide-right-leave-to {
		transform: translateX(100%);
	}

	.slide-left-leave-to,
	.slide-right-enter {
		transform: translateX(-100%);
	}

	.icon-send {
		margin-right: 5px;
	}

	.welcomeSpeech {
		display: flex;
		width: 100%;
		// box-shadow: 0px 4px 16px 0px rgba(220, 223, 234, 0.4);
		border-radius: 12px;
		// align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;

		.welcomeSpeechCn {
			display: flex;
			flex-direction: column;
			padding: 15rpx;
			background-color: #ffffff;
			border-radius: 10rpx;

			span {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #3D3D3D;
				line-height: 3vh;
				text-align: left;
				font-style: normal;
			}

			span:first-child {
				margin-bottom: 2px;
			}
		}
	}

	.button-p {
		width: 100%;
		height: 40px;
		background: #0053F3;
		box-shadow: 0px 4px 16px 0px rgba(103, 113, 144, 0.2);
		border-radius: 8px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 0.8vw;
		color: #FFFFFF;
		line-height: 40px;
		letter-spacing: 1px;
		text-align: center;
		font-style: normal;
		cursor: pointer;
	}

	.bot-button {
		// display: flex;
		margin-right: 2.5vw;
		text-align: right;

		// margin-top: -50px;
		// justify-content: flex-end;
		>view {
			display: inline-block;
		}

		img {
			width: 20px;
			height: 20px;
			margin-left: 20px;
		}

		.copy {
			height: 3vh;
			border-radius: 8px;
			// border: 1px solid #EAEAEA;
			// display: flex;
			// align-items: center;
			// padding: 6px 12px;
			// margin-right: 0.5vw;
			cursor: pointer;
			margin-bottom: 0.5vh;

			span {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 0.65vw;
				color: #677190;
				line-height: 17px;
				text-align: left;
				font-style: normal;
				// margin-left: 4px;
			}
		}

		.reset {
			height: 3vh;
			border-radius: 8px;
			// border: 1px solid #EAEAEA;
			// display: flex;
			// align-items: center;
			// padding: 6px 12px;
			cursor: pointer;

			span {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 0.65vw;
				color: #677190;
				line-height: 17px;
				text-align: left;
				font-style: normal;
				margin-left: 4px;
			}
		}
	}
</style>
<style scoped lang="scss">
	.classDialog {
		border-radius: 20px !important;
	}

	.classDialog .el-form-item__label {
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 0.75vw;
		color: #000000;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		margin-bottom: 16px;
	}

	.classDialog .el-dialog__header {
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 20px;
		color: #000000;
		line-height: 28px;
		font-style: normal;
	}

	.el-menu-item,
	.el-submenu__title {
		height: 40px !important;
		line-height: 40px !important;
		margin-bottom: 16px;
	}

	.el-submenu__title i {
		display: none;
	}

	.el-submenu .el-menu {
		margin-bottom: 16px;
	}

	.el-submenu .el-menu-item {
		height: 20px !important;
		line-height: 20px !important;
		padding-left: 46px !important;
		margin-bottom: 16px !important;
		min-width: 146px !important;

	}

	.el-submenu .is-active {
		border: none !important;
		border-right: 3px solid #0053F3 !important;
		background: transparent !important;
		border-radius: 0 !important;
	}

	.el-dialog__body {
		padding: 10px 20px !important;
	}

	.el-form-item {
		margin-bottom: 10px !important;
	}

	.el-form--label-top .el-form-item__label {
		padding-bottom: 0 !important;
	}

	::v-deep {
		/* rich-text {
		font-size: 4vw !important;
	} */

		.zero-markdown-view-markdown {
			// font-size: 26rpx;
			// color: #3D3D3D;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #3D3D3D;
			line-height: 3vh;
			text-align: left;
			font-style: normal;
		}

		/* 覆盖默认样式 */
		.zero-markdown-view-markdown h1 {
			color: blue;
			/* 改变标题颜色 */
		}

		.zero-markdown-view-markdown p {
			font-size: 18px;
			/* 改变段落字体大小 */
		}
	}
</style>
<style scoped>
	.aaaaa {
		position: absolute !important;
		/* left: 1px; */
		/* width: 200px; */
		bottom: 10px;
		z-index: 9 !important;
		/* background-color: aqua; */
	}

	::v-deep .loading {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx !important;
		color: #3D3D3D;
		line-height: 3vh;
		text-align: left;
		font-style: normal;
	}
</style>